import { memo } from "react"
import styled from "@emotion/styled"

const CountWrapper = styled.div`
    margin: 16rem 0;
    color: #69728c;
    font-weight: 400;
    font-size: 12rem;
    height: 16rem;
    line-height: 16rem;
    letter-spacing: 0%;
    strong {
        color: #131416;
    }
`

const BetRecordCount = ({ total }: { total: number }) => {
    return (
        <CountWrapper>
            Number of records: <strong>{total} Records</strong>
        </CountWrapper>
    )
}

export default memo(BetRecordCount)
